<!--
 * @Date: 2023-02-09 16:06:32
 * @LastEditTime: 2023-02-27 15:09:28
 * @FilePath: /hash-guess-game/src/views/meGameList/meGameList.vue
 * 介绍:个人赛表
-->
<script lang="ts" setup>
import CardGlass from "@@/components/CardGlass/CardGlass.vue";
import dayjs from "dayjs";
import { omitText } from "@@/utils/tools/project";
import { formatNumber, _require } from "@@/utils/tools/tools";
import Tag, { TagEmun } from "@@/components/Tag";
import { apiMeGameList, MeGameList } from "@@/api/module/meGameList";
import useBalanceStore from "@@/store/useBalanceStore";
import globalEnum from "@@/hooks/globalEnum";
import PagingList from "@@/components/PagingList/PagingList.vue";

const balanceStore = useBalanceStore();
const { coinEnum } = storeToRefs(balanceStore);
const winEmun: TagEmun = [
  {
    text: "L",
    value: 2,
    style: {
      backgroundColor: "#e84118",
    },
  },
  {
    text: "W",
    value: 1,
    style: {
      backgroundColor: "#2ed573",
    },
  },
];
const statusEmun: TagEmun = [
  {
    text: "C",
    value: 0,
    style: {
      backgroundColor: "#1e90ff",
    },
  },
  {
    text: "S",
    value: 1,
    style: {
      backgroundColor: "#2ed573",
    },
  },
  {
    text: "F",
    value: 2,
    style: {
      backgroundColor: "#a4b0be",
    },
  },
];

// const typeEmun: TagEmun = reactive([
//   {
//     text: t("qi-ou"),
//     value: 2,
//     style: {
//       backgroundColor: "#1e90ff",
//     },
//   },
//   {
//     text: t("xing-yun"),
//     value: 3,
//     style: {
//       backgroundColor: "#2ed573",
//     },
//   },
// ]);
function getCoinEnum(): TagEmun {
  return coinEnum.value.map((val) => {
    return {
      text: val.code,
      value: val.id,
      style: {
        backgroundColor:
          globalEnum.coinColor[val.code as keyof typeof globalEnum.coinColor],
      },
    };
  });
}
const PagingListRef = ref<InstanceType<typeof PagingList>>();
function reqBefore(page: number) {
  if (page == 2) {
    PagingListRef.value?.stateEnd();
    return false;
  }
}
</script>

<template>
  <div class="meGameList">
    <h4>{{ $t("ge-ren-sai-biao") }}</h4>
    <CardGlass>
      <PagingList
        ref="PagingListRef"
        :api="apiMeGameList"
        :req-before="reqBefore"
        sticky="sticky"
      >
        <template #header>
          <div class="list_title list-layout">
            <h4>{{ $t("can-sai-shi-jian") }}</h4>
            <h4>{{ $t("ha-xi") }}</h4>
            <h4>{{ $t("huo-jiang-shu-liang") }}</h4>
          </div>
        </template>
        <template #item="{ item }: { item: MeGameList.ResItem }">
          <div class="auto-mt">
            <div class="List_item list-layout">
              <div class="T-minor T-S-sm">
                {{ dayjs(item.created_at).format("MM-DD HH:mm") }}
              </div>
              <CopyText :copy-text="item.txid" class="T-minor T-S-sm">
                {{ omitText(item.txid) }}
              </CopyText>
              <div class="T-minor T-S-sm">
                {{ formatNumber(item.return_number, 4) }}
              </div>
              <div class="T-S-sm">
                {{ $t("shu-liang") }}:{{ formatNumber(item.num, 2) }}
              </div>
              <Tag
                v-if="item.status === 1"
                :enum="winEmun"
                :value="item.is_win"
              />
              <Tag v-else :enum="statusEmun" :value="item.status" />
              <Tag :enum="getCoinEnum()" :value="item.coin_id" />
            </div>
          </div>
        </template>
      </PagingList>
    </CardGlass>
  </div>
</template>

<style lang="less" scoped>
h4 {
  text-align: center;
}
.CardGlass {
  margin-top: var(--gap-md);
}
.List_item {
  padding: var(--gap-md);
  border-bottom: 2rem solid var(--C-T1);
}
</style>
